<template>
  <div class="main-layout">
    <div class="main-top-lay">
      <PageHeader style="flex:1;border: none;" :headHei='68'
                  :title="systemTitle"
                  :logo="logo" :user="userInfo"
                  :menus="menus" ref="headerRef"/>
    </div>
    <div class="main-router">
      <RouterView style="flex: 1; height: 100%;"/>
    </div>
    <PageFooter/>
  </div>

</template>

<script setup lang="ts">

import {useStore} from "@/stores";
import {computed, nextTick, onMounted, ref, shallowRef, watch} from "vue";
import PageHeader from "@/components/common/PageTopNav.vue";
import PageFooter from "@/components/common/PageFooter.vue";
import router from "@/router";
import {useRoute} from "vue-router";
import {VAR_TAG} from "@/stores/conf";

const store = useStore();
const route = useRoute();

const logo = ref(store.settings.logo);
const systemTitle = shallowRef(store.settings.title);

const headerRef = shallowRef(null);
const menus = ref<MenuType[]>(store.getTopMenus() || []);

const userInfo = computed(() => {
  return  store.getUser();
});

watch(() => route.path,newRoute=> {
  const result = store.updateTopRoute(newRoute);

  if (result.path) {
    router.push({path: result.path.replace(VAR_TAG, '')});
    nextTick(() => {
      store.updateActiveMenu(result.name, result.path);
    })
  }
})

onMounted(() => {

})

</script>

<style scoped>
.main-layout {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main-top-lay {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.main-router {
  flex: 1;
}

</style>
